@extends('layouts._main')

@section('title','绑定手机号')

@section('css')
    <style>
        html{
            /*background: -webkit-linear-gradient(bottom, #7e859b , #454955); !* Safari 5.1 - 6.0 *!
            background: -o-linear-gradient(bottom, #7e859b, #454955); !* Opera 11.1 - 12.0 *!
            background: -moz-linear-gradient(bottom, #7e859b, #454955); !* Firefox 3.6 - 15 *!
            background: linear-gradient(to bottom, #7e859b , #454955); !* 标准的语法（必须放在最后） *!*/
            background-color: #363C76;
        }
        .body{
            /*box-sizing: border-box;*/
            padding: 20px;
            /*background-repeat:no-repeat;
            background-size:100% 100%;
            -moz-background-size:100% 100%;*/
            height: 100%;
            background-color: #363C76;
        }
        .logo{
            box-sizing: border-box;
            height: 200px;
            background: url("/images/version1/bkg-bind-phone.png") no-repeat;
            background-size:100% 100%;
            -moz-background-size:100% 100%;
            text-align: center;
            padding-top: 20px;
        }
        .weui-vcode-btn {
            display: inline-block;
            height: 10px;
            margin-left: 0px;
            padding: 8px;
            border-left: none;
            line-height: 10px;
            vertical-align: middle;
            font-size: 12px;
            color: #333;
            background: #ddd;
            border-radius: 10px;
        }

        .weui-btn_primary {
            background-color: #d79705;
        }
        .weui-input{
            color: #fff;
        }
        .weui-cell {
            padding: 5px 15px;
        }

        input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
            /* WebKit browsers */
            color: #fff;
            font-size: 12px;
        }
        input:-moz-placeholder, textarea:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: #fff;
        }
        input::-moz-placeholder, textarea::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: #fff;
        }
        input:-ms-input-placeholder, textarea:-ms-input-placeholder {
            /* Internet Explorer 10+ */
            color: #fff;
        }
        .code_dev{
            background-color:rgba(189,193,209,0.8);;
            border-radius: 10px;
        }
        .weui-cell_vcode{
            margin-top: 25px;
        }

        .cell-phone{
            background: url('/images/version1/icon_regist_phone.png') no-repeat;
            background-size:15px 100%;
            background-position-x: 3px;
            padding-left: 30px;
        }
        .cell-code{
            background: url('/images/version1/icon_regist_safe.png') no-repeat;
            background-size:21px 90%;
            padding-left: 30px;
        }
        #showTooltips:active{
            background-color: #dec07a;
            color: #fff;
        }
        .get-code:active{
            color: #000;
            background-color: #fefefe;
        }
        /*@main=#d79705*/
        /*@dan=#dec07a*/
    </style>
@endsection

@section('container')
    {{--logo--}}
    <div class="logo am-text-center">
        <img src="{{ asset('images/version1/logo_name.png') }}" width="230" alt="">
    </div>
    <div class="body">

        {{--表单--}}
        <form class="am-form am-form-horizontal">
            {{ csrf_field()}}

            {{--手机号--}}
            <div class="weui-cell">
                <div class="weui-cell__bd cell-phone">
                    <input class="weui-input" id="phone" maxlength="11" type="number" placeholder="手机号">
                </div>
            </div>

            <div class="weui-cell weui-cell_vcode">
                {{--验证码--}}
                <div class="weui-cell__bd cell-code">
                    <input class="weui-input code" type="number" placeholder="验证码">
                </div>
                {{--获取验证码--}}
                {{--<div class="weui-cell__ft code_dev">--}}
                <div><a class="weui-vcode-btn get-code" ontouchstart="">获取验证码</a></div>
                {{--</div>--}}
            </div>


            {{--提交按钮--}}
            <div class="weui-btn-area" style="margin-top: 26%">
                <a class="weui-btn weui-btn_primary submit" href="javascript:" ontouchstart="" id="showTooltips">提  交</a>
            </div>

        </form>
    </div>
@endsection

@section('js')

    <script>
        console.log($(document).width());
        $('.logo').css('height',$(document).width()/1.56+'px');

        var phone = '';

        //验证手机号
        function validate1Phone() {
            phone = $('#phone').val();
            var myreg=/^[1][3,4,5,6,7,8][0-9]{9}$/;
            if (!myreg.test(phone)) {
                showMsg('请输入正确的手机号');
                return false;
            } else {
                return true;
            }
        }

        //发送验证码
        $('.get-code').click(function(){

            var _this = $(this);

            if(!validate1Phone()) return;

            if($(this).hasClass('loading')) return ;

            $(this).addClass('loading');

            var sum_time = 60,flag = false;

            $.ajax({
                url:'/ajax/verificationCodes',
                type:'post',
                dataType:'json',
                async: false,
                data:{'_token':window.laravel_csrf_token,'telephone':phone},
                success:function(res){
                    if(res.code==200){
                        showMsg(res.msg);
                    }else if(res.code==4003){//session已被删除
                        showMsg(res.msg);
                        setTimeout(function () {
                            window.location.reload();
                        },1500);
                    }else{
                        flag = true;
                        showMsg(res.msg);
                    }

                    return ;
                },
                error:function(err){
                    flag = true;
                    var error_json = err.responseJSON;
                    console.log(err.status);
                    $('.get-code').removeClass('loading');
                    if(error_json.errors.telephone !='undefined') showMsg(error_json.errors.telephone['0']);

                    return ;
                }
            });

            if(flag) return false;
            //this = that;
            var timer = setInterval(function () {
                --sum_time;
                if(sum_time == 0){
                    clearInterval(timer);
                    // $('.get-code').css('font-size','16px').html('重新发送');
                    $('.get-code').html('重新发送');
                    $('.get-code').removeClass('loading')
                }else{
                    // $('.get-code').css('font-size','14px').html('已发送验证码('+sum_time+'s)');
                    $('.get-code').html('已发送验证码('+sum_time+'s)');
                }
            },1000);
        });

        //提交
        $('.submit').click(function () {

            if(!validate1Phone()) return false;
            //验证码
            var code = $('.code').val();

            var myreg=/^[0-9]{4}$/;
            if (!myreg.test(code)){
                showMsg('验证码格式错误');
                return false;
            }

            //验证手机验证码是否正确
            $.ajax({
                url:'/ajax/validateCode',
                type:'post',
                dataType:'json',
                data:{'_token':window.laravel_csrf_token,'telephone':phone,'code':code,'secret_param':"{{ $secret_param }}"},
                success:function(res){
                    if(res.code==4003){//session已被删除
                        showMsg(res.msg);
                        setTimeout(function () {window.location.reload();},1500);
                        return;
                    }

                    if(res.code!=200){
                        showMsg(res.msg);
                        return ;
                    }
                    //验证成功
                    window.location.href = res.msg;
                    /*setTimeout(function () {
                        window.location.href=res.msg;
                    }，1000)*/
                },
                error:function(err){
                    var error_json = err.responseJSON;
                    console.log(err.status);

                    if(error_json.errors.telephone !='undefined') showMsg(error_json.errors.telephone['0']);

                    return ;
                }
            });

            return false;
        });
    </script>
@endsection